<template>
  <div class="news">
    <n-card v-for="item in newslist" :key="item">
      <n-row>
        <n-col :span="4">
          <n-image
            width="100"
            src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
        /></n-col>
        <n-col :span="16">
          <div style="text-align: left">
            <h3>{{ item.title }}</h3>
            <span>{{ item.content }}</span>
          </div>
        </n-col>
        <n-col
          :span="4"
          style="display: flex; justify-content: center; align-items: center"
        >
          <n-statistic label="阅读量" :value="item.readquantity"> </n-statistic
        ></n-col>
      </n-row>
    </n-card>
  </div>
</template>

<script lang="ts">
import {Ref, ref } from "vue";

export default {
  name: "News",
  setup() {
    return {
    };
  },
};
</script>

<style scoped>
.news {
  padding: 0 10%;
}
</style>